.dialog-box {
  //display: none;
  pointer-events: all;
  width: 1920px;
  height: 1016px;
  backdrop-filter: blur(5.68px);
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;

  .dialog-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed #00c9db;
    padding: 32px 24px;
    // backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.4);
  }

  .dialog-title {
    .close-icon {
      cursor: pointer;
      width: 24px;
      height: 24px;
      font-size: 20px;
      line-height: 20px;
      text-align: center;
      color: #ccc;
      background-color: rgba(#00c9db, 0.4);
      border: 1px solid #00c9db;
    }
  }



  .data-box {
    .data-box-item {
      flex-direction: column;
      margin: 0 auto;
      padding: 0 16px;

      .data-box-item-text {
        font-weight: 400;
        font-size: 14px;
        letter-spacing: 0.05px;
        color: #cef5f5;
      }

      .blue-num {
        font-weight: bold;
        font-size: 32px;
        letter-spacing: 0.05px;
        color: #00c9db;
        text-shadow: 0 0 32px rgba(10, 204, 204, 0.6);
      }

      .num {
        font-weight: bold;
        font-size: 32px;
        letter-spacing: 0.05px;
      }

      .green-bottom {
        color: #13eb9c;
        filter: drop-shadow(0 0 12px #13eb9c);
      }

      .red-top {
        color: #fc5a5a;
        filter: drop-shadow(0 0 12px #fc5a5a);
      }
    }

    .data-box-item+.data-box-item {
      border-width: 0px 0px 0px 2px;
      border-color: rgb(0, 255, 127);
      border-style: solid;
      border-image: linear-gradient(0deg,
          rgba(106, 166, 177, 0),
          rgba(106, 166, 177, 1),
          rgba(106, 166, 177, 0)) 1 10;
    }
  }
}